<template>
    <div class="picHome" v-show="(pic_list==null||pic_list.length>0)?true:false">
        <div class="pic">
            <span class="title">{{pic_category.name}}</span>
            <span class="more" @click="gotoMorePic">更多+</span>
            <el-carousel class="my_el_carousel" :interval="4000" type="card" trigger="click" height="400px">
                <el-carousel-item v-for="item in pic_list" :key="item">
                    <img :src="item">
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        pic_category: Object,
        pic_info: Array,
        pic_list: Array,
    },
    data(){
        return{
            allCategory_list:[],
            allCategory_info:[],
        }
    },
    methods:{
        gotoMorePic(){
            // 路由跳转
            this.$router.push({
                path: "/picList",
                query: {
                    category_id: this.pic_category.id,
                    category_name: this.pic_category.name
                }
            });
        }
    }
}

</script>

<style scoped>
    .el-header, .el-footer {
        background-color: #227093;
        color: #fff;
        font-size: 20px;
        letter-spacing: 2px;
        font-weight: bold;
        text-align: center;
        line-height: 60px;
    }
    
    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }
    
    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 160px;
    }
    
    body > .el-container {
        margin-bottom: 40px;
    }
    
    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }
    
    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }

    /* 图片 */
    .pic{
        /* position: relative; */
        width: 1200px;
        height: 500px;
        /* border: 1px solid red; */
        /* background-color: red; */
        margin-left: 170px;
        margin-top: 50px;
    }
    .title{
        /* position: absolute; */
        width: 100px;
        height: 30px;
        margin-left: 550px;
        line-height:30px;
        font-size: 25px;
        font-weight: bold;
        letter-spacing: 3px;
        color: #2d98da;
        /* background-color: skyblue; */
        text-align: center;
    }
    .more{
        /* background-color: green; */
        float: right;
        margin-top: 20px;
        margin-right: 50px;
        cursor: pointer;
        
        /* font-weight: bold; */
        letter-spacing: 2px;
        font-size: 15px;
        color:#999;
    }
    .more:hover{
        color: red;
    }

    .my_el_carousel{
        margin-top: 50px;
        /* background-color: red; */
    }
    .el-carousel__item{
        width: 300px;
        height: 350px;
        /* border: 1px solid red; */
        margin-left: 150px;
        margin-top: 50px;
    }
    .el-carousel__item img {
        width: 300px;
        height: 350px;
        border-radius: 5px;
    }
    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }
    
    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
   
</style>
